import React, { Component } from 'react'
// 导入要使用的组件，CSSTransition是基础班，TransitionGroup进阶版
import {
  CSSTransition,
  TransitionGroup,
} from 'react-transition-group';
import './Transition2.css'

export default class Transition2 extends Component {
  constructor() {
    super();
    this.state = {
      list: [
        { id: 1, text: 'Buy eggs' },
        { id: 2, text: 'Pay bills' },
        { id: 3, text: 'Invite friends over' },
        { id: 4, text: 'Fix the TV' },
      ]
    }
  }
  delItem(id) {
    let list = this.state.list.filter(item => id != item.id);
    console.log(list);
    this.setState({list: list})
  }
  render() {
    return (
      <div>
        <TransitionGroup>
          {
            this.state.list.map((item,index)=>{
              return (
                <CSSTransition timeout={1000} key={item.id} classNames="item">
                  <div>
                    <span>{item.text}</span>
                    <button className="remove-btn" onClick={()=>this.delItem(item.id)}>del</button>
                  </div>
                </CSSTransition>
              )
            })
          }
        </TransitionGroup>
      </div>
    )
  }
}
